<template>
  <!-- <div>票据明细管理</div> -->
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="支票明细" name="1"> </el-tab-pane>
        <el-tab-pane label="承兑汇票明细" name="2"> </el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <CheckDetail :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <AcceptanceDetail :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import CheckDetail from "./components/checkDetail/index.vue";
import AcceptanceDetail from "./components/acceptanceDetail/index.vue";
import { getSupplie } from "@/api/public.js";
import { getChannelList } from "@/api/index.js";
import { useEnumSelect } from "@/hooks/index.js";
const activeName = ref("1");
const optionsData1 = reactive({});
// const getSupplieList = async () => {
//   const { data } = await getSupplie();
//   let opt = data.map((item) => {
//     return {
//       label: item.supplier_name,
//       value: item.s_id,
//     };
//   });
//   optionsData1.supplierList = opt || [];
// };
// getSupplieList();
const getChannelData = async () => {
  const { data } = await getChannelList({
    pageNum: 1,
    pageSize: 100,
  });
  optionsData1.channelList = data || [];
};
getChannelData();
const { options: optionsData } = useEnumSelect({
  params: ["check_detail_review_state"],
});
const optionsDataAll = computed(() => {
  return {
    ...optionsData.value,
    ...optionsData1,
  };
});
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
